<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces - ShowCase</title>
                <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
                <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
            </f:facet>



            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }
                .ui-datatable.borderless thead th,
                .ui-datatable.borderless tbody,
                .ui-datatable.borderless tfoot,
                .ui-datatable.borderless tbody tr,
                .ui-datatable.borderless tbody td {
                    border-style: none;
                }
                
                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>
        </h:head>


        <h:body>
            <h:form id="summary">
                <f:facet name="last">
                    <h:outputStylesheet library="css" name="my-style.css" />
                    <h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" />
                </f:facet>

                <p:layout fullPage="true" >
                    <p:layoutUnit id="top" position="north" size="50">
                        <div class="row">
                            <div class="col-md-2">
                                <p:selectOneButton value="#{language.localeCode}" onchange="submit()"
                                                   valueChangeListener="#{language.countryLocaleCodeChanged}">
                                    <f:selectItems value="#{language.countriesInMap}" />
                                </p:selectOneButton>
                            </div>
                            <div class="col-md-10">

                            </div>
                        </div>
                    </p:layoutUnit>

                    <p:layoutUnit id="bottom" position="south" size="60">
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/layoutComplex.xhtml">
                            View Page Source (layoutComplex.xhtml)
                        </h:outputLink>

                        <br />

                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/java/org/primefaces/examples/view/LayoutBean.java">
                            View Backing Bean Source (LayoutBean.java)
                        </h:outputLink>
                    </p:layoutUnit>

                    <p:layoutUnit id="left" position="west" size="270" resizable="true" collapsible="true" header="Options" minSize="200">
                        <p:accordionPanel>
                            <p:tab title="#{msg['userManagement']}">
                                <p:commandLink value="#{msg['userList']}" />
                            </p:tab>

                            <p:tab title="#{msg['postManagement']}">
                                <p:commandLink value="#{msg['postList']}" />
                            </p:tab>

                            <p:tab title="#{msg['questionManagement']}">
                                <p:commandLink value="#{msg['questionList']}" />
                            </p:tab>
                        </p:accordionPanel>
                    </p:layoutUnit>

                    <p:layoutUnit id="right" position="east" size="250" header="Gallery" resizable="true" closable="true" collapsible="true"
                                  style="text-align:center">

                        <p:lightBox style="text-align:center;margin-top:20px;">
                            <h:outputLink value="#{request.contextPath}/images/nature1.jpg" title="Nature 1" style="margin-bottom:5px;">
                                <h:graphicImage value="/images/nature1_small.jpg"/>
                            </h:outputLink>

                            <h:outputLink value="#{request.contextPath}/images/nature2.jpg" title="Nature 2" style="margin-bottom:2px;">
                                <h:graphicImage value="/images/nature2_small.jpg"/>
                            </h:outputLink>

                            <h:outputLink value="#{request.contextPath}/images/nature3.jpg" title="Nature 3" style="margin-bottom:2px;">
                                <h:graphicImage value="/images/nature3_small.jpg"/>
                            </h:outputLink>

                            <h:outputLink value="#{request.contextPath}/images/nature4.jpg" title="Nature 4" style="margin-bottom:2px;">
                                <h:graphicImage value="/images/nature4_small.jpg"/>
                            </h:outputLink>
                        </p:lightBox>

                        <p:commandButton id="basic" value="Show Dialog" onclick="PF('dlg').show();" type="button" style="margin-top:10px"/>

                    </p:layoutUnit>

                    <p:layoutUnit id="center" position="center">
                        <h:form>
                            <p:dataTable var="post" value="#{categoryBean.category.posts}" rows="10"
                                         paginator="true" paginatorPosition="bottom"
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                         rowsPerPageTemplate="5,10,15" styleClass="borderless">
                                <p:column headerText="Id" width="5%">
                                    <h:outputText value="#{post.postId}" />
                                </p:column>

                                <p:column headerText="Title" width="15%">
                                    <h:outputText value="#{post.title}" />
                                </p:column>

                                <p:column headerText="Content" width="70%">
                                    <h:outputText value="#{post.content.subSequence(0, 100)}" escape="true" />
                                </p:column>

                                <p:column headerText="Creator" width="10%">
                                    <h:outputText value="#{post.user.userName}" />
                                </p:column>
                            </p:dataTable>
                        </h:form>
                        <p:commandButton value="TEST" action="#" style="background-color: red !important"/>
                        <input class="border-none btnBlue" type="submit" value="OK" />
                    </p:layoutUnit>

                </p:layout>

                <p:dialog header="Basic Dialog" widgetVar="dlg" modal="true">
                    <h:outputText value="Resistance to PrimeFaces is futile!" />
                </p:dialog>
            </h:form>
        </h:body>

    </f:view>
</html>
